<template>
    <div class="GameBox">
        <div class="title">推箱子小游戏</div>
        <div class="info">
            <div class="gkInfo">关卡：{{count}}</div>
            <button class="back" @click="goBackGame">上一关</button>
            <button class="next" @click="goNext">下一关</button>
            <button class="reset" @click="ResetGame">重玩</button>
        </div>
        <div class="game">
            <div class="rows" v-for="(row, index) in map" :key="index">
                <div
                v-for="(it, ins) in row"
                :key="ins"
                :class="{'box': true, 'qiang': it==1, 'dimian': it!=1&&it!=8}"
                :style="{width: boxWidth + 'px', height: boxWidth + 'px' }"
                >
                <img src="@/assets/image/O.png" alt="ren" v-if="it==9" class="img"> <!-- 小乌龟 -->
                <div class="dot" v-if="it==2" :style="{width: boxWidth/3 + 'px', height: boxWidth/3 +'px'}"></div>              
                <img src="@/assets/image/X2.png" alt="xiangzi" v-if="it==3" class="img"> <!-- 箱子 -->
            </div>
        </div>
        </div>
        <div class="operate">
            <div class="top">
                <button @click="goDirection('top')">上</button>
            </div>
            <div class="midle">
                <button @click="goDirection('left')">左</button>
                <button @click="goDirection('right')">右</button>
            </div>
            <div class="bottom">
                <button @click="goDirection('bottom')">下</button>
            </div>
        </div>
    </div>
</template>

<script>
import gk from '@/assets/js/index.js'
export default {
    name: 'GameBox',
    data() {
        return {
            gk: gk,
            gkArr: gk,
            defaultGk: {},
            map: [],
            count: 1,  // 1默认, 2第二关
            isNext: 0, // 默认下一关不可玩

            row: 0,  // 小乌龟所处的行列
            col: 0,

            boxWidth: 0,
        }
    },
    watch: {
        // 监听关卡， 拿到对应的数据
        count: {
            handler(newVal, oldVal) {
                this.defaultGk = this.gkArr[newVal]
                this.isNext = this.gkArr[newVal]?.isNext || 0

                // 深克隆
                let arr = this.gkArr[newVal]?.map || ''
                let rows = arr&&arr.length || 0
                let cols = arr[0]&&arr[0].length || 0
                let MapArr = []
                for(let i=0; i<rows; i++) {
                MapArr[i] = [...arr[i]]
                for(let j=0; j<cols; j++) {
                    MapArr[i][j] = arr[i][j]
                }
                }
                this.map = MapArr
                this.boxWidth = 360/(this.map[0]&&this.map[0].length)>=60 ? 45 : 360/(this.map[0]&&this.map[0].length)
            },
            immediate: true,
        },
        // 监听地图，地图发生改变，实时修改小乌龟的行列
        map: {
            handler(newVal, oldVal) {
                let flag = 1
                newVal.map((arr, rowIndex) => {
                    arr.map((it, colIndex) => {
                        // 9表示小乌龟
                        if(it==9) {
                            this.row = rowIndex
                            this.col = colIndex
                            // console.log('rowIndex:', rowIndex)
                            // console.log('colIndex:', colIndex)
                        }

                        // 默认地图上的坑位2上面，在新map数组中不对应箱子3则表示游戏还没有成功
                        if(this.defaultGk.map[rowIndex][colIndex]==2) {
                            if(it !== 3) {
                                flag = 0
                            }
                        }
                    })
                })

                setTimeout(() => {
                if(flag==1) {
                    alert('游戏结束,下一关')
                    this.gkArr[this.count].isNext = 1 // 下一关设置成可玩 （主要用于上一关/下一关的按钮切换）
                    localStorage.setItem('tuixiangzi_gk', JSON.stringify(this.gkArr))

                    this.count++

                    localStorage.setItem('tuixiangzi_count', this.count)
                }
                }, 500)
            },
            immediate: true,
            deep: true
        }
    },
    created() {
        let tuixiangzi_gk = localStorage.getItem('tuixiangzi_gk')
        if(tuixiangzi_gk) {
            this.gkArr = JSON.parse(localStorage.getItem('tuixiangzi_gk'))
        }
        else {
            this.gkArr = this.gk
        }
        this.count = localStorage.getItem('tuixiangzi_count') || 1
        
        this.boxWidth = 360/(this.map[0]&&this.map[0].length) >=60 ? 45 : 360/(this.map[0]&&this.map[0].length)
    },
    methods: {
        // 上一关
        goBackGame() {
            if(this.count>1) {
                this.count--
            }
        },
        // 下一关
        goNext() {
            if(this.isNext==1) {
                this.count++
            }
            else {
                alert('请先通过本关卡')
            }
        },
        // 重玩
        ResetGame() {
            // 深克隆
            let arr = this.defaultGk?.map || ''
            let rows = arr&&arr.length || 0
            let cols = arr[0]&&arr[0].length || 0
            let MapArr = []
            for(let i=0; i<rows; i++) {
                MapArr[i] = [...arr[i]]
                for(let j=0; j<cols; j++) {
                    MapArr[i][j] = arr[i][j]
                }
            }
            this.map = MapArr
        },
        // 操作方向
        goDirection(type) {
            if(type=='top') {
                let boxValue = this.map[this.row-1][this.col]
                // 上面一个元素不是墙也不是箱子
                if(boxValue!==1 && boxValue!==3) {
                    this.eleMove(this.row, this.col, type)
                }
                // 上面一个元素是箱子, 需要判断箱子的上一个元素是否是坑位
                else if(boxValue==3) {
                    let nextValue = this.map[this.row-2][this.col]
                    if(nextValue!==1 && nextValue!==3) {
                        // 移动箱子
                        this.eleMove(this.row-1, this.col, type)
                        // 移动小乌龟
                        this.eleMove(this.row, this.col, type)
                    }
                }
            }
            else if(type=='bottom') {
                let boxValue = this.map[this.row+1][this.col]
                // 下面一个元素不是墙也不是箱子
                if(boxValue!==1 && boxValue!==3) {
                    this.eleMove(this.row, this.col, type)
                }
                // 下面一个元素是箱子, 需要判断箱子的下一个元素是否是坑位
                else if(boxValue==3) {
                    let nextValue = this.map[this.row+2][this.col]
                    if(nextValue!==1 && nextValue!==3) {
                        // 移动箱子
                        this.eleMove(this.row+1, this.col, type)
                        // 移动小乌龟
                        this.eleMove(this.row, this.col, type)
                    }
                }
            }
            else if(type=='left') {
                let boxValue = this.map[this.row][this.col-1]
                // 左面一个元素不是墙也不是箱子
                if(boxValue!==1 && boxValue!==3) {
                    this.eleMove(this.row, this.col, type)
                }
                // 左面一个元素是箱子, 需要判断箱子的左一个元素是否是坑位
                else if(boxValue==3) {
                    let nextValue = this.map[this.row][this.col-2]
                    if(nextValue!==1 && nextValue!==3) {
                        // 移动箱子
                        this.eleMove(this.row, this.col-1, type)
                        // 移动小乌龟
                        this.eleMove(this.row, this.col, type)
                    }
                }
            }
            else if(type=='right') {
                let boxValue = this.map[this.row][this.col+1]
                // 右面一个元素不是墙也不是箱子
                if(boxValue!==1 && boxValue!==3) {
                    this.eleMove(this.row, this.col, type)
                }
                // 右面一个元素是箱子, 需要判断箱子的右一个元素是否是坑位
                else if(boxValue==3) {
                    let nextValue = this.map[this.row][this.col+2]
                    if(nextValue!==1 && nextValue!==3) {
                        // 移动箱子
                        this.eleMove(this.row, this.col+1, type)
                        // 移动小乌龟
                        this.eleMove(this.row, this.col, type)
                    }
                }
            }
        },
        // 移动
        eleMove(row, col, direction) {
            // console.log('row:', row)
            // console.log('col:', col)
            // 0地面，1墙，2坑位，3箱,  8(墙外)空, 9小乌龟
            let defaultMap = this.defaultGk.map
            if(direction=='top') {
                this.map[row-1][col] = this.map[row][col]  // 移动
                
                if(defaultMap[row][col]==9) {
                    this.map[row][col] = 0
                }
                else if(defaultMap[row][col]==0 || defaultMap[row][col]==2){
                    this.map[row][col] = defaultMap[row][col]
                }
                else {
                    this.map[row][col] = 0
                }

                this.$set(this.map, row-1, this.map[row-1])
                this.$set(this.map, row, this.map[row])
            }
            else if(direction=='bottom') {
                this.map[row+1][col] = this.map[row][col]
                this.map[row][col] = (defaultMap[row][col]==9 ?  0 : defaultMap[row][col])

                if(defaultMap[row][col]==9) {
                    this.map[row][col] = 0
                }
                else if(defaultMap[row][col]==0 || defaultMap[row][col]==2){
                    this.map[row][col] = defaultMap[row][col]
                }
                else {
                    this.map[row][col] = 0
                }

                this.$set(this.map, row+1, this.map[row+1])
                this.$set(this.map, row, this.map[row])
            }
            else if(direction=='left') {
                this.map[row][col-1] = this.map[row][col]
                
                if(defaultMap[row][col]==9) {
                    this.map[row][col] = 0
                }
                else if(defaultMap[row][col]==0 || defaultMap[row][col]==2){
                    this.map[row][col] = defaultMap[row][col]
                }
                else {
                    this.map[row][col] = 0
                }

                this.$set(this.map, row, this.map[row])
            }
            else if(direction=='right') {
                this.map[row][col+1] = this.map[row][col]
                
                if(defaultMap[row][col]==9) {
                    this.map[row][col] = 0
                }
                else if(defaultMap[row][col]==0 || defaultMap[row][col]==2){
                    this.map[row][col] = defaultMap[row][col]
                }
                else {
                    this.map[row][col] = 0
                }

                this.$set(this.map, row, this.map[row])

                // [this.map[row][col], this.map[row][col+1]] = [this.map[row][col+1], this.map[row][col]]
            }
        },
    }
}
</script>

<style scoped lang="scss">
.GameBox {
    width: 375px;
    margin: 0 auto;
    padding: 30px 0 20px;

    display: flex;
    flex-wrap: wrap;

    .title {
        width: 100%;
        margin-bottom: 50px;
        font-size: 30px;
        color: #af5939;
        letter-spacing: 5px;
        font-weight: bold;
        text-align: center;
        text-shadow: rgba(#af5939, 0.5) 2px 2px 6px;
    }

    .info {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        font-size: 14px;
        font-weight: bold;
        
        .gkInfo {
            flex: 1;
            color: #af5939;
            font-size: 15px;
        }

        .reset, .back, .next {
            margin-left: 10px;
            padding: 5px 15px;
            border: none;
            background-color: #bc7d30ed;
            border-radius: 5px;
            color: #fff;
        }
    }

    // 游戏区域
    .game {
        // width: 100%;
        display: inline-block;
        margin: 30px auto;
        background-color: #bc7d30ed;
        .rows {
            display: flex;
            .box {
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                .img {
                    width: 99%;
                    height: 99%;
                }

                .dot {
                    border-radius: 50%;
                    background-color: green;
                }
            }

            .qiang {
                background: url('@/assets/image/Q.png') no-repeat;
                background-size: cover;
                border: 1px solid #00000052;
            }

            .dimian {
                background: url('@/assets/image/D.png') no-repeat;
                background-size: cover;
            }
        }
    }

    .operate {
        width: 100%;
        // background-color: pink;

        .top {
            display: flex;
            button {
                margin: 0 auto 10px;
            }
        }
        .midle {
            display: flex;
            justify-content: center;
            button:nth-child(1) {
                margin-right: 20px;
            }
        }
        .bottom {
            display: flex;
            button {
                margin: 10px auto 0;
            }
        }

        button {
            padding: 5px 30px;
            border: none;
            background-color: #bc7d30ed;
            border-radius: 5px;
            color: #fff;
        }
    }
}
</style>
